﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="MyRoutes.aspx.cs" Inherits="DBWTProject.route.MyRoutes" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <style type="text/css">
        .chbRouteSelector label
        {
            display:none;/*Trickserei: Label muss da sein (da ich mit JS den Wert auslese), aber soll nicht angezeigt werden*/
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#txbRouteName').keyup(function () { // works immediately when user press button inside of the input
                $(this).change(); // simulate "change" event
            });
            $('#txbRouteName').change(checkField);
            checkField(); //einmal initial

            function checkField() {
                if ($('#txbRouteName').val() == "") {
                    //$("form[name=commentIt-form] #commentIt-status").html("Bitte beachten Sie folgende Pflichtfelder: " + fields);
                    $("#btnUpload").attr("disabled", "disabled");
                } else {
                    //$("form[name=commentIt-form] #commentIt-status").html("");
                    $("#btnUpload").removeAttr("disabled");
                }
            }

            $('#filterTable').hide();

            //Klick in Zeile genügt, um Checkbox zu checken/unchecken.
            $('#grvAllRoutes tr').click(function (event) {
                if (event.target.type !== 'checkbox') {
                    var checkbox = $(this).find('.chbRouteSelector input');
                    if (checkbox.attr('checked')) {
                        checkbox.removeAttr('checked');
                    } else {
                        checkbox.attr('checked', 'checked');
                    }
                }
            });
        });

    function checkAllCheckBoxes(sender) {
        if (sender.checked) {
            $('.chbRouteSelector input').attr('checked', 'checked');
        } else {
            $('.chbRouteSelector input').removeAttr('checked');
        }
    }

    function clearDateFilter() {
        $('#txtDateStart').val('');
        $('#txtDateEnd').val('');
        $('#txbName').val('');
    }

    /*
    * Link zum Routenvergleich:
    * URL mit QueryString selbstzusammenbauen und dahin weiterleiten
    */
    function btnCompare_ClientClick() {
        var selectedRouteIds = getSelectedRouteId(); //"5_6_13"
        self.location.href = "/route/CompareRoutes.aspx?compareRouteIDs=" + selectedRouteIds;
    }

    /*
    * Durchläuft die Tabelle und liefert die IDs der gecheckten Routen zurück.
    * Rückgabe ist ein String der Form "5_6_13" ("_" separiert die RouteIDs)
    */
    function getSelectedRouteId() {
        var resultString = "";
        $('.chbRouteSelector input:checked').each(function () {
            var id = $(this).next("label").text();
            resultString += id + "_";
        });
        resultString = resultString.substring(0, resultString.length - 1);//letztes _ entfernen
        return resultString;
    }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>My Routes</h2>
    <h3><img src="/Styles/icons/map_add.png" /> Import a route</h3>
    <table>
        <tr>
            <td>Route name:</td>
            <td>
                <asp:TextBox ID="txbRouteName" runat="server" ClientIDMode="Static"></asp:TextBox>
            </td>
        <tr>
            <td>File:</td>
            <td >
                <asp:FileUpload ID="fupKMLUpload" runat="server" />
            </td>
        </tr>
        </tr>
        <tr>
            <td colspan="2" align="right">
                <asp:Button ID="btnUpload" runat="server" Text="Start Upload" OnClick="btnUpload_Click" ClientIDMode="Static" />
            </td>
        </tr>
    </table>
    <h3><img src="/Styles/icons/map_magnify.png" /> My Routes</h3>

     <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
     <a href="#" onclick="$('#filterTable').toggle(500); return false;">Filter</a><div id="filterTable" >
    <table style="border:1px solid #ccc" >
        <tr>
            <td>Start:</td>
            <td>
                <asp:TextBox ID="txtDateStart" runat="server" ClientIDMode="Static"></asp:TextBox>  
                <asp:ImageButton ID="ibtnDateStart" runat="server" ImageUrl="~/Styles/icons/date.png" />
                <asp:CalendarExtender ID="cexDateStart" TargetControlID="txtDateStart"  runat="server" Animated="true" Format="dd.MM.yy" PopupButtonID="ibtnDateStart"  />  
            </td>
            <td>End:</td>
            <td>
                <asp:TextBox ID="txtDateEnd" runat="server" ClientIDMode="Static"></asp:TextBox>  
                <asp:ImageButton ID="ibtnDateEnd" runat="server" ImageUrl="~/Styles/icons/date.png" />
                <asp:CalendarExtender ID="cexDateEnd" TargetControlID="txtDateEnd"  runat="server" Animated="true" Format="dd.MM.yy" PopupButtonID="ibtnDateEnd"  />  
            </td>
        </tr>
        <tr>
            <td>Name:</td>
            <td><asp:TextBox ID="txbName" runat="server" ClientIDMode="Static"></asp:TextBox>  </td>
            <td></td>
            <td align="right">
                <asp:ImageButton ID="ibtnFilterClear" runat="server" ImageUrl="~/Styles/icons/cross.png" OnClientClick="clearDateFilter(); return false;" ToolTip="Clear filter"/>
                <asp:ImageButton ID="ibtnFilterDate" runat="server" ImageUrl="~/Styles/icons/magnifier.png" ClientIDMode="Static" onclick="ibtnFilterDate_Click" ToolTip="Apply filter"/>
            </td>

        </tr>
    </table>
    </div>
           <br />

    <asp:GridView ID="grvAllRoutes" runat="server" AutoGenerateColumns="False" 
        CellPadding="10" DataKeyNames="ID,Date,Name"  CssClass="datatable" ClientIDMode="Static">
        <Columns>
            <asp:TemplateField ItemStyle-HorizontalAlign="Center" >
                <HeaderTemplate>
                    <input id="chkAll" onclick="checkAllCheckBoxes(this)" runat="server" type="checkbox" clientidmode="Static" />
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="chbRouteSelector" runat="server" CssClass="chbRouteSelector" Text='<%#Bind("ID") %>' />
                </ItemTemplate>
                <ItemStyle HorizontalAlign="Center"></ItemStyle>
            </asp:TemplateField>
            <asp:BoundField DataField="ID" HeaderText="ID" ReadOnly="True"  />
            <asp:BoundField DataField="Date" HeaderText="Date" 
                DataFormatString="{0:dd.MM.yy}"  />
            <asp:BoundField DataField="Name" HeaderText="Name"  />
            <asp:BoundField DataField="Distance" DataFormatString="{0:n1} km" 
                HeaderText="Distance" />
            <asp:BoundField DataField="DurationInHours" DataFormatString="{0:n1} h" 
                HeaderText="Duration" />
            <asp:TemplateField>
                <HeaderTemplate >Details</HeaderTemplate>
                <ItemTemplate>
                    <asp:HyperLink ID="RouteDetail" runat="server" ToolTip="Show route details" ImageUrl="~/Styles/icons/map_go.png" NavigateUrl='<%# Eval("ID", "/route/RouteDetail.aspx?ID={0}") %>'/>
                </ItemTemplate>
                <ItemStyle HorizontalAlign="Center" />
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

    <p>Select action for checked routes:<br />
    <asp:button id="btnDelete" 
            style="background-image:url('/Styles/icons/bin.png');" 
            CssClass="customButton" Runat="server" Text="Delete" 
            onclick="btnDelete_Click"/>
    <asp:button id="btnCompare" 
            style="background-image:url('/Styles/icons/chart_bar.png');" 
            CssClass="customButton" Runat="server" Text="Compare" 
            OnClientClick="btnCompare_ClientClick(); return false;"   />
    </p>
<h3><img src="/Styles/icons/calendar.png" />Statistics</h3>
    <p>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            CellPadding="4" ForeColor="#333333" GridLines="None" >
            <AlternatingRowStyle BackColor="White" />
            <Columns>
                <asp:BoundField DataField="year" HeaderText="Year" DataFormatString="{0}" />
            </Columns>
            <EditRowStyle BackColor="#2461BF" />
            <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
            <RowStyle BackColor="#EFF3FB" />
            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
            <SortedAscendingCellStyle BackColor="#F5F7FB" />
            <SortedAscendingHeaderStyle BackColor="#6D95E1" />
            <SortedDescendingCellStyle BackColor="#E9EBEF" />
            <SortedDescendingHeaderStyle BackColor="#4870BE" />
        </asp:GridView>
    </p>
    <p>
        <asp:DataList ID="dlYear" runat="server" ShowFooter="False" 
            ShowHeader="False">
            <HeaderTemplate>
                <td>Year</td>
            </HeaderTemplate>
             <ItemTemplate>
                <li><asp:HyperLink Text='<%# DataBinder.Eval(Container.DataItem, "Item1") %>' ID="yearDetail" runat="server" ToolTip="Show " NavigateUrl='<%# Eval("Item1", "/route/Stat.aspx?y={0}") %>'/></li>
             </ItemTemplate>
        </asp:DataList>
    </p>

</asp:Content>
